<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>每日定位</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element-ui相关js -->
    <script src="//unpkg.com/vue@2/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
    <!-- 引入jquery -->
    <script src="../js/jquery.min.js"></script>

    <script src="../js/Qihao.js"></script>
    <script src="../js/Dingwei.js"></script>
    <link rel="stylesheet" href="../css/Dingwei.css">
</head>
<body>
<div id="app">
    <el-calendar>
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
        <template slot="dateCell" slot-scope="{date, data}" class="dingwei_jieguo">
            <span style="font-size: 14px">
                {{getQihaoByDateAndZhongwen(data.day)}}
            </span>
            <span class="kaijiangHao" :class="getDingweiResult(data.day) == '正确' ? 'dingwei_jieguo':''">
                {{getKijiang(data.day)}}
            </span>
            <span class="shijian" :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
            </span>
            <span class="purchaseAmount" >
                {{getPurchaseAmount(data.day)}}
            </span>
            <template>
                <div>
                    <el-checkbox-group
                            :disabled="isDateReadOnly(data.day)"
                            v-model="getDateData(data.day).baiwei"
                            size="mini"
                            @change="handleChecked(data.day, 100)"
                            >
                        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
                    </el-checkbox-group>
                    <el-checkbox-group
                            :disabled="isDateReadOnly(data.day)"
                            v-model="getDateData(data.day).shiwei"
                            size="mini"
                            @change="handleChecked(data.day, 100)">
                        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
                    </el-checkbox-group>
                    <el-checkbox-group
                            :disabled="isDateReadOnly(data.day)"
                            v-model="getDateData(data.day).gewei"
                            size="mini"
                            @change="handleChecked(data.day, 100)">
                        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
                    </el-checkbox-group>
                </div>
            </template>
        </template>
    </el-calendar>


<!--    <el-row :gutter="6">-->
<!--        <el-col :span="3"><div class="grid-content bg-purple">-->
<!--            -->
<!--        </div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->

<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->

<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->

<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>-->
<!--    </el-row>-->
</div>


<style>
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>

</body>
</html>